﻿<div class="doc-part-box" id="toolclass">
  <h2>便利样式</h2>
  <p class="article-title">文本超出省略</p>
  <p class="text-overflow" style="width:100px" title="text-overflow文本超出时,显示省略号">text-overflow文本超出时,显示省略号</p>

  <p class="article-title">文本对齐</p>
  <p>text-left text-center text-right text-justify:两端对齐</p>

  <p class="article-title">文本主题色</p>
  <div class="grids-3">
    <p class="text-primary">class="text-primary"</p>
    <p class="text-danger">class="text-danger"</p>
    <p class="text-success">class="text-success"</p>
  </div>

  <p class="article-title">背景主题色</p>
  <div class="grids-3">
    <p class="bg-primary pd-5">class="bg-primary"</p>
    <p class="bg-danger pd-5">class="bg-danger"</p>
    <p class="bg-success pd-5">class="bg-success"</p>
  </div>

  <p class="article-title">margin padding</p>
  <p>pd-n(n=5,10,15,..,45,50) 四个方向 pd-l-n pd-r-n pd-t-n pd-b-n 组合上下与左右 pd-lr-n pd-tb-n</p>
  <div>
    <span class="pd-10 bg-primary">class="pd-10"</span>
    <span class="pd-t-10 bg-primary">class="pd-t-10"</span>
    <span class="mg-l-10 bg-primary">class="mg-l-20"</span>
  </div>
  <br />
  <p class="article-title">隐藏与显示</p>
  <p>d-none d-block 媒体查询:针对不同大小屏幕 d-sm-none d-md-none d-lg-none d-xl-none</p>
  <span class="d-none d-sm-block">sm 576px以上显示</span>
  <span class="d-none d-lg-block">lg 992px以上显示</span>
  <span class="d-none d-xl-block">lg 1200px以上显示</span>
</div>